<template>
  <div class="breadcrumb_container">
    <!-- 15.2将基础用法的代码复制 -->
    <!-- 15.3去到 Home.vue 文件 -->
    <el-breadcrumb :separator="$route.path === '/home' ? '' : '/'">
      <!-- 15.11配置首页的 path -->
      <!-- <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item> -->

      <!-- 15.22实现可跳转就添加:to属性，然后判断用户点击的是否是当前的父级路由第1个，如果是就直接跳转到子级路由的第0个 -->
      <el-breadcrumb-item v-for="item, index in list"
        :to="index === 1 ? `${item.path}/${item.children[0].path}` : item.path" :key="item.name">
        {{ item.name }}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
// 15.12导入 route
import { useRoute } from 'vue-router'
// 15.13定义 route
const route = useRoute()
// 15.14打印查看 route 里面的父路由和子路由
// console.log(route.matched)

// 15.15这里我们自己生成首页 /home，使用computed
const list = computed(() => {
  // 15.16先定义 arr 为 route.matched
  let arr = route.matched
  // 15.17打印查看 arr
  // console.log(arr)
  // 15.18判断如果arr的长度大于1
  if (arr.length > 1) {
    // 15.19那么就将首页跟arr合并
    arr = [{ path: '/home', name: '首页' }].concat(arr)
  } else {
    // 15.20如果小于1,那么就只显示首页
    arr = [{ path: '/home', name: '首页' }]
  }
  // 15.21然后返回 arr
  return arr
})

// onMounted(() => {
  // 15.6查看到打印出来的 this.$route 里面有 matched是所有路由信息，父级跟子级路由的都在
  // 15.7去到 router文件夹里面的 index.ts
  // console.log(this.$route);
  // console.log(this.$route.matched);
  // [{ path: '/dashboard', meta: { title: 'dashboard' } } as any].concat(matched)
  // let arr = router.matched

  // list.value = [{ path: '/home', name:'首页'  }].concat(arr)
  // console.log(list)
// })
</script>

<style lang="less" scoped>
.breadcrumb_container {
  height: 30px;
  border-bottom: 1px solid #eee;
  box-sizing: border-box;
  margin-bottom: 24px;
}
</style>